/*!
 * Bespoke.js Demo Themes
 *
 * These styles are hard-coded to be pre-processor agnostic.
 * In reality, you should probably use -prefix-free or LESS / SCSS / Stylus.
 *
 * This is only scratching the surfact of what can be done.
 * Be creative and make something that surprises people! ;)
 *
 */
body {
  background-color: #fafafa;
}

section {
  background-color: white;
  box-shadow: 0 2px 6px rgb(0 0 0 / 50%);
}

/* Cube Theme */
.cube section.bespoke-before {
  transform: translateX(-480px) rotateY(-70deg) translateX(-1440px)
    rotateY(-110deg) translateX(-960px);
}
.cube section.bespoke-before-1 {
  transform: translateX(-480px) rotateY(-70deg) translateX(-480px);
  opacity: 0.5;
}
.cube section.bespoke-after {
  transform: translateX(480px) rotateY(70deg) translateX(1440px) rotateY(110deg)
    translateX(960px);
}
.cube section.bespoke-after-1 {
  transform: translateX(480px) rotateY(70deg) translateX(480px);
  opacity: 0.5;
}

/* Concave Theme */
.concave section.bespoke-before {
  transform: translateX(-1440px) rotateY(90deg) translateX(-1440px);
}
.concave section.bespoke-before-1 {
  transform: translateX(-576px) rotateY(58deg) translateX(-480px);
  opacity: 0.4;
}
.concave section.bespoke-after {
  transform: translateX(1440px) rotateY(-90deg) translateX(1440px);
}
.concave section.bespoke-after-1 {
  transform: translateX(576px) rotateY(-58deg) translateX(480px);
  opacity: 0.4;
}

/* Coverflow Theme */
.coverflow section.bespoke-before {
  -webkit-transform: translateX(-270px) rotateY(45deg) scale(0.6);
  -moz-transform: translateX(-270px) rotateY(45deg) scale(0.6);
  -ms-transform: translateX(-270px) rotateY(45deg) scale(0.6);
  -o-transform: translateX(-270px) rotateY(45deg) scale(0.6);
  transform: translateX(-270px) rotateY(45deg) scale(0.6);
  z-index: 6;
}
.coverflow section.bespoke-before-3 {
  -webkit-transform: translateX(-230px) rotateY(45deg) scale(0.6);
  -moz-transform: translateX(-230px) rotateY(45deg) scale(0.6);
  -ms-transform: translateX(-230px) rotateY(45deg) scale(0.6);
  -o-transform: translateX(-230px) rotateY(45deg) scale(0.6);
  transform: translateX(-230px) rotateY(45deg) scale(0.6);
  opacity: 0.1;
  z-index: 7;
}
.coverflow section.bespoke-before-2 {
  -webkit-transform: translateX(-190px) rotateY(45deg) scale(0.6);
  -moz-transform: translateX(-190px) rotateY(45deg) scale(0.6);
  -ms-transform: translateX(-190px) rotateY(45deg) scale(0.6);
  -o-transform: translateX(-190px) rotateY(45deg) scale(0.6);
  transform: translateX(-190px) rotateY(45deg) scale(0.6);
  opacity: 0.2;
  z-index: 8;
}
.coverflow section.bespoke-before-1 {
  -webkit-transform: translateX(-150px) rotateY(45deg) scale(0.6);
  -moz-transform: translateX(-150px) rotateY(45deg) scale(0.6);
  -ms-transform: translateX(-150px) rotateY(45deg) scale(0.6);
  -o-transform: translateX(-150px) rotateY(45deg) scale(0.6);
  transform: translateX(-150px) rotateY(45deg) scale(0.6);
  opacity: 0.3;
  z-index: 9;
}
.coverflow section.bespoke-active {
  z-index: 10;
}
.coverflow section.bespoke-after {
  -webkit-transform: translateX(270px) rotateY(-45deg) scale(0.6);
  -moz-transform: translateX(270px) rotateY(-45deg) scale(0.6);
  -ms-transform: translateX(270px) rotateY(-45deg) scale(0.6);
  -o-transform: translateX(270px) rotateY(-45deg) scale(0.6);
  transform: translateX(270px) rotateY(-45deg) scale(0.6);
  z-index: 6;
}
.coverflow section.bespoke-after-1 {
  -webkit-transform: translateX(150px) rotateY(-45deg) scale(0.6);
  -moz-transform: translateX(150px) rotateY(-45deg) scale(0.6);
  -ms-transform: translateX(150px) rotateY(-45deg) scale(0.6);
  -o-transform: translateX(150px) rotateY(-45deg) scale(0.6);
  transform: translateX(150px) rotateY(-45deg) scale(0.6);
  opacity: 0.3;
  z-index: 9;
}
.coverflow section.bespoke-after-2 {
  -webkit-transform: translateX(190px) rotateY(-45deg) scale(0.6);
  -moz-transform: translateX(190px) rotateY(-45deg) scale(0.6);
  -ms-transform: translateX(190px) rotateY(-45deg) scale(0.6);
  -o-transform: translateX(190px) rotateY(-45deg) scale(0.6);
  transform: translateX(190px) rotateY(-45deg) scale(0.6);
  opacity: 0.2;
  z-index: 8;
}
.coverflow section.bespoke-after-3 {
  -webkit-transform: translateX(230px) rotateY(-45deg) scale(0.6);
  -moz-transform: translateX(230px) rotateY(-45deg) scale(0.6);
  -ms-transform: translateX(230px) rotateY(-45deg) scale(0.6);
  -o-transform: translateX(230px) rotateY(-45deg) scale(0.6);
  transform: translateX(230px) rotateY(-45deg) scale(0.6);
  opacity: 0.1;
  z-index: 7;
}

/* Classic Theme */
.classic section.bespoke-before {
  transform: translate3d(-2112px, 0, 0);
}
.classic section.bespoke-before-2 {
  transform: translate3d(-2112px, 0, 0);
  opacity: 0.1;
}
.classic section.bespoke-before-1 {
  transform: translate3d(-1152px, 0, 0);
  opacity: 0.3;
}
.classic section.bespoke-after {
  transform: translate3d(2112px, 0, 0);
}
.classic section.bespoke-after-2 {
  transform: translate3d(2112px, 0, 0);
  opacity: 0.1;
}
.classic section.bespoke-after-1 {
  transform: translate3d(1152px, 0, 0);
  opacity: 0.3;
}

/* Carousel Theme */
.carousel section.bespoke-before {
  transform: translateX(-1920px) rotateY(-72deg) translateX(-2112px);
  opacity: 0;
}
.carousel section.bespoke-before-2 {
  transform: translateX(-1056px) rotateY(-52deg) translateX(-1440px);
  opacity: 0.3;
}
.carousel section.bespoke-before-1 {
  transform: translateX(-480px) rotateY(-30deg) translateX(-576px);
  opacity: 0.5;
}
.carousel section.bespoke-after {
  transform: translateX(1920px) rotateY(72deg) translateX(2112px);
  opacity: 0;
}
.carousel section.bespoke-after-1 {
  transform: translateX(480px) rotateY(30deg) translateX(576px);
  opacity: 0.5;
}
.carousel section.bespoke-after-2 {
  transform: translateX(1056px) rotateY(52deg) translateX(1440px);
  opacity: 0.3;
}
.carousel section {
  margin-top: 0px;
}
